<script setup lang="ts">
  import {SITE_SEO_INFO} from '~/common/constants'
  import request from '@/utils/request'
  import {throwError} from '@/utils/throwError'
  import { SUCCESS_CODE } from '~/common/constants'
  import {useSystemStore} from '~/store/system'

  const router = useRouter()
  const route = useRoute()
  const systemStore = useSystemStore()

  useHead({
    title: systemStore.siteInfo['site-name'],
    meta: SITE_SEO_INFO.index
  })

  /**
   * 获取网站内容分类数据
   */
  const categoryData = ref([])

  try {
    const res = await request('/index/category', {
      method: 'GET',
      server: true,
      key: 'indexCategory'
    })
    const { code, msg, data} = res.data.value
    if (code !== SUCCESS_CODE) {
      throwError(msg)
    } else {
      categoryData.value = data
      systemStore.categoryList = data
    }
  } catch (e) {
    throwError(e.message)
  }
  const onCategoryChange = (navItem: any, index: number, e: MouseEvent) => {
    e.preventDefault()
    systemStore.categoryIndex = index
    systemStore.categoryPageKey = navItem.key
    systemStore.categoryId = navItem.id
    router.push(navItem.url)
  }

  systemStore.setCategoryIndex(route.fullPath)
</script>

<template>
  <main class="container main-container with-view-nav">
     <div class="view timeline-index-view">
           <!-- 分类导航栏 start -->
           <div :class="['index-nav', {'index-nav-top': systemStore.topViewNav}]">
              <div class="side-navigator-wrap">
                  <div class="nav-item-wrap">
                    <div :class="['nav-item-content', item.id === systemStore.currentCategoryId ? 'active-nav' : undefined]" v-for="(item, index) in categoryData" :key="item.id">
                      <a @click="onCategoryChange(item, index, $event)" class="nav-item">
                        <span class="nav-item-text">{{item.name}}</span>
                      </a>
                    </div>
                  </div>
              </div>
           </div>
          <nav role="navigation" :class="['view-nav','index-nav-before',{top: systemStore.topViewNav}]" ref="viewNavRef">
            <div class="nav-list left">
              <a @click="onCategoryChange(item, index, $event)" :class="['nav-item', item.id === systemStore.currentCategoryId ? 'active' : undefined ]" v-for="(item, index) in categoryData" :key="item.id">
                <div class="category-popover-box">
                  <span>{{item.name}}</span>
                </div>
              </a>
            </div>
          </nav>

           <!-- 分类导航栏 end -->
           <div class="timeline-container">
             <!-- 主内容区 start -->
             <div class="timeline-content">
                 <div class="timeline-entry-list">
                     <NuxtPage :page-key="systemStore.categoryPageKey"/>
                 </div>
                 <!-- 右边栏 start -->
                 <aside class="aside">
                       <div id="main">
                         <div id="show_time">春夏秋冬</div>
                       </div>
                      <SiteInfoSideBar :site-record-num="systemStore.siteInfo['site-record-num']"/>
                 </aside>
                 <!-- 右边栏 end -->
             </div>
             <!-- 主内容区 end -->
           </div>
     </div>
  </main>
</template>

<style lang="scss" scoped>
  #show_time{font-family:"Micro";text-align:center;font-weight:bold;font-size:30px;color:#fff;text-shadow:1px 1px 2px #000}

  .large-container {
    .main-container {
      @include clearfix;
      max-width: $largeContainerWith;
      .timeline-index-view {
        margin-top: 20px;
        display: flex;
        flex-direction: row;
        .index-nav {
          width: 180px;
          position: sticky;
          top: 80px;
          margin-right: 20px;
          height: fit-content;
          border-radius: 4px;
          background-color: var(--tidy-layer-1);
          max-height: calc(100vh - 101px);
          overflow-x: hidden;
          .side-navigator-wrap {
            min-width: 180px;
            box-sizing: border-box;
            padding: 8px;
            font-size: 16px;
            color: #f2f3f5;
            .nav-item-wrap {
              display: flex;
              flex-direction: column;
              .nav-item-content {
                line-height: 24px;
                border-radius: 4px;
                cursor: pointer;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                &.active-nav {
                  font-weight: 500;
                  background-color: var(--tidy-brand-6-light);
                }
                &:hover {
                  background-color: var(--tidy-gray-3);
                }
                &:hover,&.active-nav {
                  .nav-item {
                    color: var(--tidy-font-brand1-normal);
                    cursor: pointer;
                  }
                }
                .nav-item {
                  display: inline-block;
                  width: 100%;
                  box-sizing: border-box;
                  position: relative;
                  padding: 10px 17px;
                  cursor: pointer;
                  color: var(--tidy-font-2);
                  .nav-item-text {
                    position: relative;
                    vertical-align: middle;
                  }
                }
              }
            }
          }
        }
        .timeline-container {
          margin: 0 auto;
          .timeline-content {
            position: relative;
            .timeline-entry-list {
              margin-right: 280px;
              border-radius: 2px;
              width: 720px;
              position: relative;
            }
            .aside {
              width: 260px;
              position: absolute;
              top: 0;
              right: 0;
              z-index:1;
            }
          }
        }
      }
    }
  }
</style>
